<template>


    <div class="common-layout">
        <el-scrollbar>
            <el-container>
                <el-header>
                    <div class="title">
                        <h2>数据统计</h2>
                    </div>
                </el-header>
                <el-main>
                
                
                    

                        <el-row>
                            <el-col :span="24">
                            
                                <div class="charts">
                            
                                    <div class="bart"> <h1>七日内折线图</h1>
                                        <BarChart :datacounts="state.WeekStatusCount"></BarChart>
                                    </div>
                                    
                                            
                                    <div class="title">
                                        <p>本周累计</p>
                                        <span>&nbsp;{{ state.WeekStatusCount.totalTasks }}&nbsp;</span> &nbsp;
                                        <p>项待办</p><br />
                                        <p>共完成</p>
                                        <span v-if="state.WeekStatusCount.total">&nbsp;{{ state.WeekStatusCount.total.finished}}&nbsp;</span>
                                        <p>项</p>
                                        <p>剩余</p>
                                        <span v-if="state.WeekStatusCount.total">&nbsp;{{ state.WeekStatusCount.total.doing}}&nbsp;</span>
                                        <p>项</p>
                                    </div>
                                    
                                    
                                </div>
                            </el-col>

                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="10">
                                <TriangleEchart></TriangleEchart>
                            </el-col>

                            <el-col :span="14">
                                
                                <StatisticChart :data="state.WeekStatusCount"></StatisticChart>
                            </el-col>
                        </el-row>
                </el-main>
            </el-container>
         </el-scrollbar>
    </div>


</template>

<script setup>

import { onMounted, reactive } from 'vue';

import requestMethods from '../../api/api';
import BarChart from '../../components/charts/BarChart.vue'

import TriangleEchart from '../../components/charts/TriangleEchart.vue';
import StatisticChart from '../../components/charts/StatisticChart.vue'
const state = reactive({
    WeekStatusCount:{}
})

onMounted(()=>{
    
    requestMethods.getWeekStatusCount()
        .then(res => {
            console.log(res.data)
            state.WeekStatusCount = res.data
           
        })
        .catch(error => {
            console.log(error)
        })

})

</script>

<style scoped lang="less">
.el-container {
    margin-top: 2rem;

 
    --el-header-height:auto;
    .el-header {

        display: flex;
        justify-content: flex-start;
        margin-bottom: 20px;
    }

    .el-main {
        margin: 0;
        padding: 0;
        height: 100vh;
        .charts{ 
        background-color: #ffff;     
        border-radius: 25px;
        margin: 0;
        height: 300px;
        padding-top: 20px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-bottom: 40px;
        .bart{
            height: 100%;
            width: 80%
        }
        .title{
          padding-right: 100px;
          p{
            font-weight: 300;
            font-size: 20px;
            letter-spacing: 4px;
            display: inline-block;
          }
          span{
            color: var(--el-menu-active-color);
            line-height: 20px;
            font-size: 40px;
            font-weight: 600;
          }
        }
    }
}
}
</style>